Le but de ce chapitre est de présenter les axes afin de permettre d'expliquer les graphiques. Nous prendrons le graphe de l'exercice 1 du chapitre 4
que nous allons améliorer.
Dans ce premier exercice nous allons préparer le graphe en introduisant les marges afin de permettre de facilement créer des axes. Les marges sont des espaces dans le canvas qui permettent de décaler le graphe. On a donc un espace dans lequel on peut écrire du texte.
Il vous est demandé de faire le travail suivant :
- Créer la largeur et la hauteur effective du canvas (taille de la zone dans laquelle on veut dessiner (exemple : largeur effective = largeur du canvas - marge à gauche - marge à droite).
On prendra comme taille de canvas : 250 pixels en largeur et 500 en hauteur
- Créer le canvas en utilisant les notations précédentes
- Recréer le graphe de l'exercice 1 du chapitre 4 en utilisant ces nouvelles notations
- Ecrire le titre suivant en gras : "Notes sur 100". Le titre doit être au-dessus du graphe (dans la marge du haut)
- Réecrire un titre semblable sous le graphe (dans la marge du bas)
Remarques :
- Ressource pour les conventions sur les marges dans un svg : https://gist.github.com/mbostock/3019563
- Pour les questions 5 et 6, il faudra légèrement modifier la position du texte pour le recentrer (.attr("x",...) et .attr("y",...)
- Pour la question 6 la fonction .attr("transform", "translate(x,y)") de d3 sera utile.